﻿<!DOCTYPE html>
<html>
  <head>
    <title>侧边工具栏 Side Toolbar</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/______side_toolbar/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/______side_toolbar/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u11552" class="ax_default" data-label="背景">
        <div id="u11552_state0" class="panel_state" data-label="State1" style="">
          <div id="u11552_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u11553" class="ax_default" data-label="线条">
        <div id="u11553_state0" class="panel_state" data-label="State1" style="">
          <div id="u11553_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11554" class="ax_default _默认样式">
        <div id="u11554_div" class=""></div>
        <div id="u11554_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11555" class="ax_default _默认样式">
        <div id="u11555_div" class=""></div>
        <div id="u11555_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u11557" class="ax_default _默认样式">
        <img id="u11557_img" class="img " src="images/___icons/u605.png"/>
        <div id="u11557_text" class="text ">
          <p><span>Copyright © </span><a id="u11558" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11559" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="130">

        <!-- Unnamed (Rectangle) -->
        <div id="u11560" class="ax_default _默认样式">
          <div id="u11560_div" class=""></div>
          <div id="u11560_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">侧边工具栏始终固定在页面左右两侧区域，为页面重要功能提供快速操作入口，本页提供了左右两种类型的侧边工具栏示例。演示示例中的工具栏使用母版进行了封装，复用起来非常方便，但需要对动态面板的功能有一定的掌握。使用时将工具栏母版复制到你的原型中，然后修改母版中动态面板里面的相关元素即可。示例中还包含了动态提示和登录等交互效果，点击相关图标会提示登录，点击登录按纽后页面会完成刷新，同时侧边工具栏会切换到登录状态。登录状态切换是通过全局变量赋值获取登录态，用到了Axure的全局变量和条件判断等知识点。</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11561" class="ax_default _默认样式">
          <div id="u11561_div" class=""></div>
          <div id="u11561_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (右侧边工具栏) -->

      <!-- 侧边工具栏 (Dynamic Panel) -->
      <div id="u11563" class="ax_default" data-label="侧边工具栏">
        <div id="u11563_state0" class="panel_state" data-label="State1" style="">
          <div id="u11563_state0_content" class="panel_state_content">

            <!-- 图标菜单 (Dynamic Panel) -->
            <div id="u11564" class="ax_default" data-label="图标菜单">
              <div id="u11564_state0" class="panel_state" data-label="未登录" style="">
                <div id="u11564_state0_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11565" class="ax_default _默认样式">
                    <div id="u11565_div" class=""></div>
                    <div id="u11565_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11566" class="ax_default _默认样式">
                    <div id="u11566_div" class=""></div>
                    <div id="u11566_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11567" class="ax_default _默认样式">
                    <div id="u11567_div" class=""></div>
                    <div id="u11567_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11568" class="ax_default _默认样式">
                    <div id="u11568_div" class=""></div>
                    <div id="u11568_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11569" class="ax_default _默认样式">
                    <div id="u11569_div" class=""></div>
                    <div id="u11569_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11570" class="ax_default _默认样式">
                    <div id="u11570_div" class=""></div>
                    <div id="u11570_text" class="text ">
                      <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span></p>
                    </div>
                  </div>
                </div>
              </div>
              <div id="u11564_state1" class="panel_state" data-label="已登录" style="visibility: hidden;">
                <div id="u11564_state1_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11571" class="ax_default _默认样式">
                    <div id="u11571_div" class=""></div>
                    <div id="u11571_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11572" class="ax_default _默认样式">
                    <div id="u11572_div" class=""></div>
                    <div id="u11572_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11573" class="ax_default _默认样式">
                    <div id="u11573_div" class=""></div>
                    <div id="u11573_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11574" class="ax_default _默认样式">
                    <div id="u11574_div" class=""></div>
                    <div id="u11574_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11575" class="ax_default _默认样式">
                    <div id="u11575_div" class=""></div>
                    <div id="u11575_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11576" class="ax_default _默认样式">
                    <div id="u11576_div" class=""></div>
                    <div id="u11576_text" class="text ">
                      <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11577" class="ax_default _默认样式">
                    <div id="u11577_div" class=""></div>
                    <div id="u11577_text" class="text ">
                      <p><span>5</span></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 用户菜单 (Dynamic Panel) -->
            <div id="u11578" class="ax_default" data-label="用户菜单">
              <div id="u11578_state0" class="panel_state" data-label="未登录" style="">
                <div id="u11578_state0_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11579" class="ax_default _默认样式">
                    <div id="u11579_div" class=""></div>
                    <div id="u11579_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11580" class="ax_default _默认样式">
                    <div id="u11580_div" class=""></div>
                    <div id="u11580_text" class="text ">
                      <p><span>请先登录</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Hot Spot) -->
                  <div id="u11581" class="ax_default">
                  </div>
                </div>
              </div>
              <div id="u11578_state1" class="panel_state" data-label="已登录" style="visibility: hidden;">
                <div id="u11578_state1_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11582" class="ax_default _默认样式">
                    <div id="u11582_div" class=""></div>
                    <div id="u11582_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11583" class="ax_default _默认样式">
                    <div id="u11583_div" class=""></div>
                    <div id="u11583_text" class="text ">
                      <p><span>小黑黑</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Hot Spot) -->
                  <div id="u11584" class="ax_default">
                  </div>
                </div>
              </div>
            </div>

            <!-- 箭头 (Left Arrow Button) -->
            <div id="u11585" class="ax_default _默认样式 ax_default_hidden" data-label="箭头" style="display:none; visibility: hidden">
              <img id="u11585_img" class="img " src="images/______side_toolbar/箭头_u11585.png"/>
              <div id="u11585_text" class="text ">
                <p><span>标题文字</span></p>
              </div>
            </div>

            <!-- 气泡卡片 (Dynamic Panel) -->
            <div id="u11586" class="ax_default ax_default_hidden" data-label="气泡卡片" style="display:none; visibility: hidden">
              <div id="u11586_state0" class="panel_state" data-label="State1" style="">
                <div id="u11586_state0_content" class="panel_state_content">

                  <!-- Unnamed (Speech Bubble) -->
                  <div id="u11587" class="ax_default _默认样式">
                    <img id="u11587_img" class="img " src="images/______side_toolbar/u11587.png"/>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11588" class="ax_default _默认样式">
                    <div id="u11588_div" class=""></div>
                    <div id="u11588_text" class="text ">
                      <p><span>我的账户</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11589" class="ax_default _默认样式">
                    <div id="u11589_div" class=""></div>
                    <div id="u11589_text" class="text ">
                      <p><span>个人中心</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11590" class="ax_default _默认样式">
                    <div id="u11590_div" class=""></div>
                    <div id="u11590_text" class="text ">
                      <p><span>我的订单</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11591" class="ax_default _默认样式">
                    <div id="u11591_div" class=""></div>
                    <div id="u11591_text" class="text ">
                      <p><span>我的积分</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11592" class="ax_default _默认样式">
                    <div id="u11592_div" class=""></div>
                    <div id="u11592_text" class="text ">
                      <p><span>退出登录</span></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 登录面板 (快速登录面板) -->

      <!-- 登录对话框 (Dynamic Panel) -->
      <div id="u11594" class="ax_default ax_default_hidden" data-label="登录对话框" style="display:none; visibility: hidden">
        <div id="u11594_state0" class="panel_state" data-label="登录对话框" style="">
          <div id="u11594_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u11595" class="ax_default _默认样式">
              <div id="u11595_div" class=""></div>
              <div id="u11595_text" class="text ">
                <p></p><p></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11596" class="ax_default _默认样式">
              <div id="u11596_div" class=""></div>
              <div id="u11596_text" class="text ">
                <p><span>用户登录</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11597" class="ax_default _默认样式" title="关闭">
              <div id="u11597_div" class=""></div>
              <div id="u11597_text" class="text ">
                <p><span></span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11598" class="ax_default _默认样式">
              <div id="u11598_div" class=""></div>
              <div id="u11598_text" class="text ">
                <p><span></span></p>
              </div>
            </div>

            <!-- Unnamed (Group) -->
            <div id="u11599" class="ax_default" data-left="84" data-top="351" data-width="240" data-height="40">

              <!-- Unnamed (Rectangle) -->
              <div id="u11600" class="ax_default _默认样式">
                <div id="u11600_div" class=""></div>
                <div id="u11600_text" class="text ">
                  <p><span>登录</span></p>
                </div>
              </div>

              <!-- 加载图标 (SVG) -->
              <div id="u11601" class="ax_default image ax_default_hidden" data-label="加载图标" style="display:none; visibility: hidden">
                <img id="u11601_img" class="img " src="images/_____common_forms/加载图标_u9561.svg"/>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11602" class="ax_default _默认样式">
              <div id="u11602_div" class=""></div>
              <div id="u11602_text" class="text ">
                <p><span>注册新用户</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11603" class="ax_default _默认样式">
              <div id="u11603_div" class=""></div>
              <div id="u11603_text" class="text ">
                <p><span>忘记密码?</span></p>
              </div>
            </div>

            <!-- 输入框 (Group) -->
            <div id="u11604" class="ax_default" data-label="输入框" data-left="84" data-top="195" data-width="240" data-height="40">

              <!-- 边框 (Rectangle) -->
              <div id="u11605" class="ax_default _默认样式" data-label="边框">
                <img id="u11605_img" class="img " src="images/输入框_input/边框_u5042.png"/>
              </div>

              <!-- 输入框 (Text Field) -->
              <div id="u11606" class="ax_default _默认样式" data-label="输入框">
                <input id="u11606_input" type="text" value="" maxlength="20"/>
              </div>

              <!-- 清除 (Rectangle) -->
              <div id="u11607" class="ax_default _默认样式 ax_default_hidden" data-label="清除" style="display:none; visibility: hidden">
                <div id="u11607_div" class=""></div>
                <div id="u11607_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>

              <!-- 图标 (Rectangle) -->
              <div id="u11608" class="ax_default _默认样式" data-label="图标">
                <div id="u11608_div" class=""></div>
                <div id="u11608_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>
            </div>

            <!-- 输入框 (Group) -->
            <div id="u11609" class="ax_default" data-label="输入框" data-left="84" data-top="255" data-width="240" data-height="40">

              <!-- 边框 (Rectangle) -->
              <div id="u11610" class="ax_default _默认样式" data-label="边框">
                <img id="u11610_img" class="img " src="images/输入框_input/边框_u5042.png"/>
              </div>

              <!-- 输入框 (Text Field) -->
              <div id="u11611" class="ax_default _默认样式" data-label="输入框">
                <input id="u11611_input" type="password" value="" maxlength="20"/>
              </div>

              <!-- 清除 (Rectangle) -->
              <div id="u11612" class="ax_default _默认样式 ax_default_hidden" data-label="清除" style="display:none; visibility: hidden">
                <div id="u11612_div" class=""></div>
                <div id="u11612_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>

              <!-- 图标 (Rectangle) -->
              <div id="u11613" class="ax_default _默认样式" data-label="图标">
                <div id="u11613_div" class=""></div>
                <div id="u11613_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>
            </div>

            <!-- 独立复选框 (Group) -->
            <div id="u11614" class="ax_default" data-label="独立复选框" data-left="84" data-top="301" data-width="240" data-height="40">

              <!-- text (Rectangle) -->
              <div id="u11615" class="ax_default _默认样式" data-label="text">
                <div id="u11615_div" class=""></div>
                <div id="u11615_text" class="text ">
                  <p><span>记住登录状态</span></p>
                </div>
              </div>

              <!-- 复选图标 (Rectangle) -->
              <div id="u11616" class="ax_default _默认样式" data-label="复选图标">
                <img id="u11616_img" class="img " src="images/输入框_input/成功提示_u5053.png"/>
                <div id="u11616_text" class="text ">
                  <p><span> </span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (左侧边工具栏) -->

      <!-- 侧边工具栏 (Dynamic Panel) -->
      <div id="u11618" class="ax_default" data-label="侧边工具栏">
        <div id="u11618_state0" class="panel_state" data-label="State1" style="">
          <div id="u11618_state0_content" class="panel_state_content">

            <!-- 阴影背景 (Rectangle) -->
            <div id="u11619" class="ax_default _默认样式" data-label="阴影背景">
              <div id="u11619_div" class=""></div>
            </div>

            <!-- 图标菜单 (Dynamic Panel) -->
            <div id="u11620" class="ax_default" data-label="图标菜单">
              <div id="u11620_state0" class="panel_state" data-label="未登录" style="">
                <div id="u11620_state0_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11621" class="ax_default _默认样式">
                    <div id="u11621_div" class=""></div>
                    <div id="u11621_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11622" class="ax_default _默认样式">
                    <div id="u11622_div" class=""></div>
                    <div id="u11622_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11623" class="ax_default _默认样式">
                    <div id="u11623_div" class=""></div>
                    <div id="u11623_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11624" class="ax_default _默认样式">
                    <div id="u11624_div" class=""></div>
                    <div id="u11624_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11625" class="ax_default _默认样式">
                    <div id="u11625_div" class=""></div>
                    <div id="u11625_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11626" class="ax_default _默认样式">
                    <div id="u11626_div" class=""></div>
                    <div id="u11626_text" class="text ">
                      <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span></p>
                    </div>
                  </div>
                </div>
              </div>
              <div id="u11620_state1" class="panel_state" data-label="已登录" style="visibility: hidden;">
                <div id="u11620_state1_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11627" class="ax_default _默认样式">
                    <div id="u11627_div" class=""></div>
                    <div id="u11627_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11628" class="ax_default _默认样式">
                    <div id="u11628_div" class=""></div>
                    <div id="u11628_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11629" class="ax_default _默认样式">
                    <div id="u11629_div" class=""></div>
                    <div id="u11629_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11630" class="ax_default _默认样式">
                    <div id="u11630_div" class=""></div>
                    <div id="u11630_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11631" class="ax_default _默认样式">
                    <div id="u11631_div" class=""></div>
                    <div id="u11631_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11632" class="ax_default _默认样式">
                    <div id="u11632_div" class=""></div>
                    <div id="u11632_text" class="text ">
                      <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11633" class="ax_default _默认样式">
                    <div id="u11633_div" class=""></div>
                    <div id="u11633_text" class="text ">
                      <p><span>5</span></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 用户菜单 (Dynamic Panel) -->
            <div id="u11634" class="ax_default" data-label="用户菜单">
              <div id="u11634_state0" class="panel_state" data-label="未登录" style="">
                <div id="u11634_state0_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11635" class="ax_default _默认样式">
                    <div id="u11635_div" class=""></div>
                    <div id="u11635_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11636" class="ax_default _默认样式">
                    <div id="u11636_div" class=""></div>
                    <div id="u11636_text" class="text ">
                      <p><span>请先登录</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Hot Spot) -->
                  <div id="u11637" class="ax_default">
                  </div>
                </div>
              </div>
              <div id="u11634_state1" class="panel_state" data-label="已登录" style="visibility: hidden;">
                <div id="u11634_state1_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11638" class="ax_default _默认样式">
                    <div id="u11638_div" class=""></div>
                    <div id="u11638_text" class="text ">
                      <p><span></span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11639" class="ax_default _默认样式">
                    <div id="u11639_div" class=""></div>
                    <div id="u11639_text" class="text ">
                      <p><span>小黑黑</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Hot Spot) -->
                  <div id="u11640" class="ax_default">
                  </div>
                </div>
              </div>
            </div>

            <!-- 箭头 (Shape) -->
            <div id="u11641" class="ax_default _默认样式 ax_default_hidden" data-label="箭头" style="display:none; visibility: hidden">
              <img id="u11641_img" class="img " src="images/______side_toolbar/箭头_u11641.png"/>
              <div id="u11641_text" class="text ">
                <p><span>标题文字</span></p>
              </div>
            </div>

            <!-- 气泡卡片 (Dynamic Panel) -->
            <div id="u11642" class="ax_default ax_default_hidden" data-label="气泡卡片" style="display:none; visibility: hidden">
              <div id="u11642_state0" class="panel_state" data-label="State1" style="">
                <div id="u11642_state0_content" class="panel_state_content">

                  <!-- Unnamed (Shape) -->
                  <div id="u11643" class="ax_default _默认样式">
                    <img id="u11643_img" class="img " src="images/______side_toolbar/u11643.png"/>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11644" class="ax_default _默认样式">
                    <div id="u11644_div" class=""></div>
                    <div id="u11644_text" class="text ">
                      <p><span>我的账户</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11645" class="ax_default _默认样式">
                    <div id="u11645_div" class=""></div>
                    <div id="u11645_text" class="text ">
                      <p><span>个人中心</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11646" class="ax_default _默认样式">
                    <div id="u11646_div" class=""></div>
                    <div id="u11646_text" class="text ">
                      <p><span>我的订单</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11647" class="ax_default _默认样式">
                    <div id="u11647_div" class=""></div>
                    <div id="u11647_text" class="text ">
                      <p><span>我的积分</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u11648" class="ax_default _默认样式">
                    <div id="u11648_div" class=""></div>
                    <div id="u11648_text" class="text ">
                      <p><span>退出登录</span></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 登录面板 (快速登录面板) -->

      <!-- 登录对话框 (Dynamic Panel) -->
      <div id="u11650" class="ax_default ax_default_hidden" data-label="登录对话框" style="display:none; visibility: hidden">
        <div id="u11650_state0" class="panel_state" data-label="登录对话框" style="">
          <div id="u11650_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u11651" class="ax_default _默认样式">
              <div id="u11651_div" class=""></div>
              <div id="u11651_text" class="text ">
                <p></p><p></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11652" class="ax_default _默认样式">
              <div id="u11652_div" class=""></div>
              <div id="u11652_text" class="text ">
                <p><span>用户登录</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11653" class="ax_default _默认样式" title="关闭">
              <div id="u11653_div" class=""></div>
              <div id="u11653_text" class="text ">
                <p><span></span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11654" class="ax_default _默认样式">
              <div id="u11654_div" class=""></div>
              <div id="u11654_text" class="text ">
                <p><span></span></p>
              </div>
            </div>

            <!-- Unnamed (Group) -->
            <div id="u11655" class="ax_default" data-left="84" data-top="351" data-width="240" data-height="40">

              <!-- Unnamed (Rectangle) -->
              <div id="u11656" class="ax_default _默认样式">
                <div id="u11656_div" class=""></div>
                <div id="u11656_text" class="text ">
                  <p><span>登录</span></p>
                </div>
              </div>

              <!-- 加载图标 (SVG) -->
              <div id="u11657" class="ax_default image ax_default_hidden" data-label="加载图标" style="display:none; visibility: hidden">
                <img id="u11657_img" class="img " src="images/_____common_forms/加载图标_u9561.svg"/>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11658" class="ax_default _默认样式">
              <div id="u11658_div" class=""></div>
              <div id="u11658_text" class="text ">
                <p><span>注册新用户</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11659" class="ax_default _默认样式">
              <div id="u11659_div" class=""></div>
              <div id="u11659_text" class="text ">
                <p><span>忘记密码?</span></p>
              </div>
            </div>

            <!-- 输入框 (Group) -->
            <div id="u11660" class="ax_default" data-label="输入框" data-left="84" data-top="195" data-width="240" data-height="40">

              <!-- 边框 (Rectangle) -->
              <div id="u11661" class="ax_default _默认样式" data-label="边框">
                <img id="u11661_img" class="img " src="images/输入框_input/边框_u5042.png"/>
              </div>

              <!-- 输入框 (Text Field) -->
              <div id="u11662" class="ax_default _默认样式" data-label="输入框">
                <input id="u11662_input" type="text" value="" maxlength="20"/>
              </div>

              <!-- 清除 (Rectangle) -->
              <div id="u11663" class="ax_default _默认样式 ax_default_hidden" data-label="清除" style="display:none; visibility: hidden">
                <div id="u11663_div" class=""></div>
                <div id="u11663_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>

              <!-- 图标 (Rectangle) -->
              <div id="u11664" class="ax_default _默认样式" data-label="图标">
                <div id="u11664_div" class=""></div>
                <div id="u11664_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>
            </div>

            <!-- 输入框 (Group) -->
            <div id="u11665" class="ax_default" data-label="输入框" data-left="84" data-top="255" data-width="240" data-height="40">

              <!-- 边框 (Rectangle) -->
              <div id="u11666" class="ax_default _默认样式" data-label="边框">
                <img id="u11666_img" class="img " src="images/输入框_input/边框_u5042.png"/>
              </div>

              <!-- 输入框 (Text Field) -->
              <div id="u11667" class="ax_default _默认样式" data-label="输入框">
                <input id="u11667_input" type="password" value="" maxlength="20"/>
              </div>

              <!-- 清除 (Rectangle) -->
              <div id="u11668" class="ax_default _默认样式 ax_default_hidden" data-label="清除" style="display:none; visibility: hidden">
                <div id="u11668_div" class=""></div>
                <div id="u11668_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>

              <!-- 图标 (Rectangle) -->
              <div id="u11669" class="ax_default _默认样式" data-label="图标">
                <div id="u11669_div" class=""></div>
                <div id="u11669_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>
            </div>

            <!-- 独立复选框 (Group) -->
            <div id="u11670" class="ax_default" data-label="独立复选框" data-left="84" data-top="301" data-width="240" data-height="40">

              <!-- text (Rectangle) -->
              <div id="u11671" class="ax_default _默认样式" data-label="text">
                <div id="u11671_div" class=""></div>
                <div id="u11671_text" class="text ">
                  <p><span>记住登录状态</span></p>
                </div>
              </div>

              <!-- 复选图标 (Rectangle) -->
              <div id="u11672" class="ax_default _默认样式" data-label="复选图标">
                <img id="u11672_img" class="img " src="images/输入框_input/成功提示_u5053.png"/>
                <div id="u11672_text" class="text ">
                  <p><span> </span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11673" class="ax_default" data-left="20" data-top="250" data-width="1100" data-height="1200">

        <!-- Unnamed (Rectangle) -->
        <div id="u11674" class="ax_default _默认样式">
          <div id="u11674_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11675" class="ax_default _默认样式">
          <img id="u11675_img" class="img " src="images/______side_toolbar/u11675.png"/>
          <div id="u11675_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
